<!--
  文件名: Home.vue
  功能:
    1) 显示书籍列表。
    2) 提供搜索框，根据书籍标题过滤书籍列表。
    3) 提供跳转到书籍详情页的功能。
  作用:
    作为图书管理系统的首页，展示书籍信息并支持搜索功能与跳转。
-->
<template>
  <div class="home">
    <!-- 标题 -->
    <h1 class="title">在线图书管理系统</h1>

    <!-- 搜索框 -->
    <el-input
        v-model="searchQuery"
        placeholder="搜索书籍"
        suffix-icon="el-icon-search"
        style="margin-bottom: 20px"
    />

    <!-- 书籍列表 -->
    <el-row :gutter="20" class="book-list">
      <el-col
          :span="8"
          v-for="book in filteredBooks"
          :key="book.id"
          class="book-card"
      >
        <el-card :body-style="bodyStyle">
          <img :src="book.cover" alt="book cover" class="book-image" />
          <div class="book-info">
            <h3>{{ book.title }}</h3>
            <p>{{ book.author }}</p>
            <el-button type="primary" @click="goToDetail(book.id)">查看详情</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
/**
 * Home.vue 脚本部分
 * 功能:
 *   1) 处理搜索功能，过滤书籍列表。
 *   2) 实现页面跳转到书籍详情页。
 */
import { ref, computed, CSSProperties } from 'vue'
import { useRouter } from 'vue-router'
import { books } from '../data/books'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()
    const searchQuery = ref('')
    const allBooks = ref(books)

    const filteredBooks = computed(() => {
      if (!searchQuery.value) return allBooks.value
      return allBooks.value.filter(book => {
        const title = book.title ? String(book.title) : ''
        const query = searchQuery.value ? String(searchQuery.value) : ''
        return title.toLowerCase().includes(query.toLowerCase())
      })
    })

    const goToDetail = (id: number) => {
      router.push(`/book/${id}`)
    }

    const bodyStyle: CSSProperties = {
      padding: '30px'
    }

    return {
      searchQuery,
      filteredBooks,
      goToDetail,
      bodyStyle
    }
  }
}
</script>

<style scoped>
/* 标题样式 */
.title {
  text-align: center;  /* 文字居中 */
  color: white;        /* 字体颜色 */
  background-color: #4ca8f8; /* 背景颜色 */
  padding: 10px 0;     /* 上下内边距 */
  margin-bottom: 20px; /* 标题与其他元素的间距 */
  font-size: 24px;     /* 字体大小 */
  border-radius: 4px;  /* 圆角边框 */
}

/* 封面图片样式 */
.book-image {
  width: 100%;           /* 使图片宽度自适应父元素 */
  height: 200px;         /* 固定高度 */
  object-fit: contain;   /* 保持图片比例显示 */
  display: block;
  margin: 0 auto;        /* 图片水平居中 */
  border-radius: 4px;    /* 圆角效果 */
}

/* 书籍信息样式 */
.book-info {
  text-align: center;    /* 文字居中 */
  padding-top: 15px;     /* 顶部间距 */
}

/* 响应式布局 - 使用 Flex 布局 */
.book-list {
  display: flex;
  flex-wrap: wrap;        /* 允许内容换行 */
  justify-content: center; /* 卡片中央对齐 */
}

.book-card {
  flex: 1 1 30%;         /* 设置卡片占据30%宽度 */
  max-width: 300px;      /* 限制卡片最大宽度 */
  margin-bottom: 20px;   /* 设置卡片底部间距 */
}

/* 大屏幕 (如电脑) 布局，每行显示3个卡片 */
@media (min-width: 1024px) {
  .book-card {
    flex: 1 1 30%;         /* 每行显示3个卡片 */
    max-width: 33.33%;     /* 限制最大宽度为 1/3 */
  }

  .book-image {
    height: 250px;         /* 增加图片高度，确保完整显示 */
  }
}

/* 小屏幕（如手机）调整 */
@media (max-width: 768px) {
  .book-card {
    flex: 1 1 100%;        /* 小屏幕下每个卡片占据100%宽度 */
    max-width: 100%;       /* 限制宽度为100% */
  }

  .book-image {
    height: 250px;         /* 增加图片高度，适应小屏设备 */
  }
}

/* 超小屏幕（如超小手机）调整 */
@media (max-width: 480px) {
  .title {
    font-size: 18px;       /* 调整标题字体大小 */
  }
}
</style>
